<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>请假管理列表</title>
		<script src="js/global.js"></script>
	</head>

	<body>
		<!-- 表单搜素 -->
		<div class="layui-form-item">
			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">请假人</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="userName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">请假时间</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="startTime" id="startTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="endTime" id="endTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">是否批准</label>
					<div class="layui-input-inline" style="width: 100px;">
						<select name="isPizhun" id="isPizhun" class="layui-select">
							<option value="">请选择</option>
							<option value="未批准">未批准</option>
							<option value="已批准">已批准</option>
						</select>
					</div>
				</div>
				<input type="button" class="layui-btn" id="souBtn" value="搜索" />
			</form>
		</div>

		<!-- 表格容器 -->
		<table id="demo" lay-filter="test"></table>

		<script type="text/html" id="barDemo1">
			<h2 style="color: grey;">员工请假记录列表</h2>
		</script>

		<!-- 表格的行内工具条 -->
		<script type="text/html" id="barDemo2">
			{{# if(d.isPizhun!='已批准'){ }}
			<a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe642;</i>批假</a>
			{{# } }}
		</script>

		<!-- 脚本代码部分 -->
		<script>
			layui.use(['form', 'layer', 'table', 'laydate'], function() {
				var form = layui.form;
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.$;
				var laydate = layui.laydate;

				//执行一个laydate实例
				laydate.render({
					elem: '#startTime' //指定元素
				});
				laydate.render({
					elem: '#endTime' //指定元素
				});
				
				//渲染表格
				table.render({
					elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
					page: true, //开启分页
					url: globalData.server + 'qingjia/getQingjiaList', //数据接口
					where: {
						token: globalData.getToken()
					},
					method: "post",
					toolbar: '#barDemo1',
					//limit:2,
					cols: [
						[ //标题栏
							{
								checkbox: true
							}, {
								field: 'id',
								title: '编号',
								sort: true,
								width: 120
							}, {
								field: 'userId',
								title: '员工编号',
								width: 120
							}, {
								field: 'userName',
								title: '员工姓名',
								width: 120
							}, {
								field: 'reason',
								title: '请假原因',
								width: 120
							}, {
								field: 'startTime',
								title: '请假开始时间',
								width: 180
							}, {
								field: 'endTime',
								title: '请假结束时间',
								width: 180
							}, {
								field: 'isPizhun',
								title: '是否批准',
								width: 120
							}, {
								field: 'remark',
								title: '备注',
								width: 120
							}, {
								toolbar: '#barDemo2',
								title: '操作'
							}
						]
					]
				});
				//渲染表格--end

				//搜索按钮的单击事件
				$("#souBtn").click(function() {
					//判断 区间的数据合理性
					if($("#min").val() > $("#max").val()) {
						alert("最高值不得高于起始值");
						return; //结束函数，下面的重载不会再执行
					}

					//表格重载
					table.reload('demo', {
						where: {
							userName: $("#userName").val(),
							startTime: $("#startTime").val(),
							endTime: $("#endTime").val(),
							isPizhun: $("#isPizhun").val(),
							min: $("#min").val(),
							max: $("#max").val()
						}
					});
				});
				//搜索按钮的单击事件-end

				//监听行内工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if(layEvent === 'detail') { //重置
							//向服务端发送重置指令
							var url = globalData.server + "qingjia/updateQingjia?token=" + globalData.getToken();
							$.post(url, {
								id: data.id
							}, function(res) {
								layer.msg(res.msg, {
									icon: 1,
									time:1500
								}, function() {
									layer.closeAll(); //关闭所有的窗口
									table.reload('demo', {}); //表格重载
									window.location.reload(); //刷新页面
								});
							}, "json");
						};
				});
				//监听行内工具条---end

			});
		</script>

	</body>

</html>